<template>
  <div class="match-details-cell">
    <div class="match-type">
      <el-tag 
        :type="matchTypeTagType"
        size="small"
      >
        {{ matchTypeText }}
      </el-tag>
      <el-tag 
        v-if="hasDifferences"
        type="danger"
        size="small"
        effect="dark"
      >
        有差异
      </el-tag>
    </div>
    <div class="match-algorithm">
      <el-tag type="info" size="small">{{ algorithmText }}</el-tag>
    </div>
    <div class="match-time">
      {{ formatTime(matchInfo.matchedAt) }}
    </div>
    <div v-if="matchInfo.confirmedAt" class="confirm-time">
      确认于 {{ formatTime(matchInfo.confirmedAt) }}
    </div>
  </div>
</template>

<script setup lang="ts">
import type { ReconciliationResult } from '@/types/reconciliation'
import { computed } from 'vue'

const props = defineProps<{
  matchInfo: ReconciliationResult['matchInfo']
  differenceInfo?: ReconciliationResult['differenceInfo']
}>()

const matchTypeTagType = computed(() => {
  return props.matchInfo?.matchType === 'auto' ? 'success' : 'warning'
})

const matchTypeText = computed(() => {
  if (!props.matchInfo) return '未知类型'
  return props.matchInfo.matchType === 'auto' ? '自动匹配' : '手动匹配'
})

const algorithmText = computed(() => {
  // 添加安全检查，确保 matchInfo 和 matchAlgorithm 存在
  if (!props.matchInfo?.matchAlgorithm) {
    return '未知算法'
  }
  
  const algorithmMap: Record<string, string> = {
    'exact_match': '精确匹配',
    'amount_first': '金额优先',
    'time_window': '时间窗口',
    'comprehensive': '综合算法'
  }
  
  return algorithmMap[props.matchInfo.matchAlgorithm] || props.matchInfo.matchAlgorithm
})

const hasDifferences = computed(() => {
  // 添加安全检查，确保 differenceInfo 存在
  return props.differenceInfo?.hasDifferences || false
})

const formatTime = (timeString: string) => {
  // 添加安全检查，确保时间字符串存在
  if (!timeString) {
    return '未知时间'
  }
  
  try {
    return new Date(timeString).toLocaleTimeString('zh-CN', { 
      hour: '2-digit', 
      minute: '2-digit',
      second: '2-digit'
    })
  } catch (error) {
    console.error('时间格式化错误:', error)
    return '时间格式错误'
  }
}
</script>

<style scoped>
.match-details-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
}

.match-type {
  display: flex;
  gap: 4px;
}

.match-algorithm {
  align-self: flex-start;
}

.match-time, .confirm-time {
  color: var(--el-text-color-secondary);
}

.confirm-time {
  font-size: 11px;
}
</style>